<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标事件</title>
    <style>
        .container{
            width: 500px;
            height: 400px;
            border:solid 1px #123;
            margin: 50px auto;
            position:relative;
        }
        .move{
            width: 80px;
            height: 80px;border:solid 1px #345;
            position:absolute;
        }
    </style>
</head>
<body>
    <div id="root"> </div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
        class App extends React.Component {
            render(){
                return <div className="container" ref={el => this.container = el} onClick={this.click} onMouseMove={this.move}>
                        <div className="move" ref={el => this.move = el} onClick={this.mclick}>
                            <a href="http://atguigu.com" onClick={this.link}>尚硅谷</a>
                        </div>
                    </div>
            }
            //鼠标移动事件回调
            move = (e) => {
                //修改 move div 的位置
                // console.log(e.clientX, e.clientY);
                //获取 move 元素
                // console.log(this.move);
                //获取鼠标距离左侧的偏移量
                let x = e.clientX;
                let y = e.clientY;
                //获取move元素宽度的一半
                let w = this.move.offsetWidth / 2;
                let h = this.move.offsetHeight / 2;
                //获取外层容器距离左侧的偏移量
                let l = this.container.offsetLeft;
                let t = this.container.offsetTop;
                //计算 move 最终的 left 值
                let newLeft = x - w - l;
                let newTop = y - h - t;
                //判断 newLeft
                if(newLeft <= 0) newLeft = 0;
                //设置 left 样式
                this.move.style.left = newLeft + 'px';
                this.move.style.top = newTop + 'px';
            }
            //外层元素
            click = (e) => {
                //获取事件源对象  1. e.target 
                // console.log(e.target);
                e.target.style.background = 'rgb(10,20,30)';
            }
            //内层元素
            mclick = (e) => {
                //阻止冒泡  2. e.stopPropagation()
                e.stopPropagation();
            }
            //a连接的单击事件处理程序
            link = (e) => {
                //阻止默认行为
                e.preventDefault();
            }
        }

        ReactDOM.render(<App />, document.querySelector("#root"));


        // div.onclick = function(){
        //     console.log(this);
        // }
    </script>
</body>
</html>